<template>
	<view class="container">
		
		<com-head textTit="加钟" :typeVal="1" :scrollTop="scrollTop"></com-head>
		<view class="group" v-for="(item, index) in orderData.project">
			<!-- <view class="group__left">
				<image v-if="item.checked == true" @click="checkedFun(index, row)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/good2.png"></image>
				<image v-else @click="checkedFun(index, row)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xuanzhong.png"></image>
			</view> -->
			<view class="group__right">
				<view class="rightImg">
					<image :src="item.project_images"></image>
				</view>
				<view class="rightBox">
					<view class="title">{{item.project_name}}</view>
					<view class="plsBox">
						<view class="dec">单价：{{item.project.add_clock_price}}元/30分钟</view>
						
						<u-number-box
							:min="1" 
							:max="9999"
							disabled-input
							v-model="item.newNumber"
							bg-color="#ffffff"
							class="numberBox"
							@minus="plus($event, index)"
							@plus="plus($event, index)"
							color="#575757"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<view class="groupList">
			<view class="item">
				<text>支付方式</text>
			</view>
			<view class="items">
				<view class="select" v-for="(item,i) in pay" :key="item" @click="payIndex=i">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="footer__text">总金融：<text class="pls">￥<text>{{priceFun}}</text></text></view>
			<view class="footer__btn" @click="submitTp()">确认支付</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				orderId: '',
				orderData: [],
				orderOldData: [],
				value: '',
				payIndex:0,
				pay:[{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（门店）',
					id: 1,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/member.png',
					title:'会员卡支付（平台）',
					id: 4,
				},
				{
					img:'//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wx.png',
					title:'微信支付',
					id: 2,
				}],
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onLoad({id}) {
			console.log(11, id)
			this.orderId = id
			this.getOrdersFun()
		},
		computed:{
			priceFun() {
				let num = 0
				this.orderData.project && this.orderData.project.forEach(item =>{
					let price = 0
					if (item.checked) {
						price = item.newNumber * item.project.add_clock_price
						num = num + price
					}
				})
				return num.toFixed(2)
			}
		},
		methods: {
			wxPay(pls){
				uni.requestPayment({
					provider: "wxpay",
					appid: pls.appId,
					timeStamp: pls.timeStamp,
					nonceStr: pls.nonceStr,
					package: pls.package,
					signType: pls.signType,
					paySign: pls.paySign,
					success(res) {
						if (res.errMsg == "requestPayment:ok") {
							that.toast("充值成功")
							setTimeout(() => {
								this.jump('', 'back')
							}, 500)
						}
					},
					fail(e) {
						if (e.errMsg == "requestPayment:fail cancel") {
							that.toast("充值已取消")
						} else {
							that.toast("充值失败" + e.errMsg)
						}
					},
				});
			},
			submitTp() {
				uni.login({
					success: (loginRes) => {
						this.$u.api.addClock({
							order_project_id: this.orderData.project[0].id,
							type: this.pay[this.payIndex].id,
							num: this.orderData.project[0].newNumber,
							code: loginRes.code
						}).then(res =>{
							if (!res.code) return
							if (res.data.appId) {
								this.wxPay(res.data)
							} else {
								this.toast("充值成功")
								setTimeout(() => {
									this.jump('', 'back')
								}, 500)
							}
						})
					}
				})
			},
			checkedFun(i, row) {
				this.orderData = []
				// row.checked = !row.checked
				this.orderOldData.project[i].checked = !this.orderOldData.project[i].checked
				this.orderData = this.orderOldData
			}, 
			async getOrdersFun(){
				let {data,code} = await this.$u.api.getOrders({id: this.orderId});
				if(code){
					this.orderData = data
					// this.orderData.project.push(data.project[0])
					this.orderData.project.forEach(item =>{
						item.checked = true
						item.newNumber = 1
					})
					this.orderOldData = JSON.parse(JSON.stringify(this.orderData))
				}
			},
			plus(row, i){
				this.orderData = []
				this.orderOldData.project[i].newNumber = row.value
				this.orderData = this.orderOldData
				// if(this.value>=this.selectSku.stock){
				// 	this.$u.toast('库存不足!')
				// }
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 30rpx;
	.group{
		// background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		&__left{
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 34rpx;
				height: 34rpx;
			}
		}
		&__right{
			// margin-left: 26rpx;
			flex: 1;
			display: flex;
			width: 100%;
			background: white;
			padding: 24rpx;
			border-radius: 16rpx;
			.rightImg{
				image{
					width: 101rpx;
					height: 101rpx;
					border-radius: 8rpx;
				}
			}
			.plsBox{
				display: flex;
				position: relative;
				width: 100%;
			}
			.numberBox{
				position: absolute;
				right: 0;
				bottom: -15rpx;
			}
			.rightBox{
				width: 100%;
				margin-left: 20rpx;
				.title{
					font-size: 28rpx;
					color: #333333;
					margin-top: 5rpx;
				}
				.dec{
					font-size: 24rpx;
					color: #999999;
					margin-top: 30rpx;
				}
			}
		}
	}
}
.footer{
	width: 100%;
	height: 208rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: white;
	&__text{
		display: inline-block;
		font-size: 30rpx;
		color: #333333;
		margin-top: 47rpx;
		margin-left: 32rpx;
		.pls{
			color: #007664;
			font-size: 30rpx;
			text{
				font-weight: bold;
				font-size: 40rpx;
			}
		}
	}
	&__btn{
		display: inline-block;
		width: 200rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #50DCC2 0%, #007664);
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		color: white;
		float: right;
		margin-top: 35rpx;
		margin-right: 32rpx;
		border-radius: 45rpx;
	}
}
.groupList{
	width: 100%;
	padding: 0 32rpx;
	background-color: #FFFFFF;
	border-radius: 15rpx;
	margin: 30rpx 0 34rpx 0;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 96rpx;
		color: #333333;
		font-size: 26rpx;
		border-bottom: 1rpx solid rgba(142,142,142,.24);
		position: relative;
		.image{
			width: 33rpx;
			height: 33rpx;
			display: inline-block;
			position: relative;
			top: 5rpx;
			margin-right: 19rpx;
		}
		.imgs{
			width: 33rpx;
			height: 33rpx;
			display: inline-block;
			position: absolute;
			right: 0;
		}
		.right{
			font-size: 24rpx;
			display: flex;
			align-items: center;
			text{
				margin-right: 32rpx;
			}
		}
	}
	.items{
		// padding: 40rpx 43rpx;
		// padding-top: 28rpx;
		.title{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
			margin-bottom: 38rpx;
		}
		.select{
			display: flex;
			align-items:center;
			// margin-bottom: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #333333;
			line-height: 40rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			padding: 28rpx 0;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			.iconfont{
				padding: 10rpx 20rpx;
			}
			.icon-a-xingzhuang1{
				color: rgba(209,184,125,1);
			}
			&:last-child{
				border: none;
			}
		}
		.price-box{
			border-top: 1px solid #d8d8d8;
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			>text{
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #007664;
				line-height: 42rpx;
				text{
					font-size: 20rpx;
					font-weight: 400;
					color: #666666;
					line-height: 42rpx;
				}
			}
			.btn{
				margin-left: auto;
				width: 236rpx;
				height: 70rpx;
				background: #007664;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.item:last-child{
		border-bottom: 1rpx solid #F6F7FA;
	}
}
	
.disabled{
	color: #999 !important;
}
::v-deep .u-icon-plus, ::v-deep .u-icon-disabled{
	width: 40rpx!important;
	height: 40rpx !important;
	background: #007664 !important;
	color: #fff !important;
	border-radius: 4rpx !important;
}

::v-deep .u-icon__icon{
	font-size: 20rpx !important;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
